<template>
  <div class="treatment-analysis">
    <el-row :gutter="20" class="stats-cards">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon total-icon">
              <el-icon><DataAnalysis /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.totalTreatments }}</div>
              <div class="stat-label">总治疗次数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon success-icon">
              <el-icon><Check /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.completedTreatments }}</div>
              <div class="stat-label">完成治疗</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon rate-icon">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.completionRate }}%</div>
              <div class="stat-label">完成率</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon avg-icon">
              <el-icon><Timer /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatDuration(stats.avgDuration) }}</div>
              <div class="stat-label">平均时长</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-section">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>治疗趋势分析</span>
              <el-select v-model="trendPeriod" @change="loadTrendChart" size="small">
                <el-option label="最近7天" value="7" />
                <el-option label="最近30天" value="30" />
                <el-option label="最近90天" value="90" />
              </el-select>
            </div>
          </template>
          <TreatmentTrendChart :data="chartData.trend" :loading="chartLoading.trend" />
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>治疗模式分布</span>
            </div>
          </template>
          <TreatmentModeChart :data="chartData.modes" :loading="chartLoading.modes" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-section">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>设备使用统计</span>
            </div>
          </template>
          <DeviceUsageChart :data="chartData.devices" :loading="chartLoading.devices" />
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>用户活跃度</span>
            </div>
          </template>
          <UserActivityChart :data="chartData.users" :loading="chartLoading.users" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { DataAnalysis, Check, TrendCharts, Timer } from '@element-plus/icons-vue'
import TreatmentTrendChart from '@/components/charts/TreatmentTrendChart.vue'
import TreatmentModeChart from '@/components/charts/TreatmentModeChart.vue'
import DeviceUsageChart from '@/components/charts/DeviceUsageChart.vue'
import UserActivityChart from '@/components/charts/UserActivityChart.vue'
import { getTreatmentStats, getTreatmentTrends, getTreatmentModes } from '@/api/treatment'
import { formatDuration } from '@/utils/format'

// 响应式数据
const stats = ref({
  totalTreatments: 0,
  completedTreatments: 0,
  completionRate: 0,
  avgDuration: 0
})

const chartData = ref({
  trend: [],
  modes: [],
  devices: [],
  users: []
})

const chartLoading = reactive({
  trend: false,
  modes: false,
  devices: false,
  users: false
})

const trendPeriod = ref('30')

// 方法
const loadTreatmentStats = async () => {
  try {
    const response = await getTreatmentStats()
    stats.value = response.data
  } catch (error) {
    console.error('加载治疗统计数据失败:', error)
  }
}

const loadTrendChart = async () => {
  chartLoading.trend = true
  try {
    const response = await getTreatmentTrends(trendPeriod.value)
    chartData.value.trend = response.data
  } catch (error) {
    console.error('加载治疗趋势失败:', error)
  } finally {
    chartLoading.trend = false
  }
}

const loadModeChart = async () => {
  chartLoading.modes = true
  try {
    const response = await getTreatmentModes()
    chartData.value.modes = response.data
  } catch (error) {
    console.error('加载治疗模式分布失败:', error)
  } finally {
    chartLoading.modes = false
  }
}

// 生命周期
onMounted(() => {
  loadTreatmentStats()
  loadTrendChart()
  loadModeChart()
})
</script>

<style scoped lang="scss">
.treatment-analysis {
  padding: 20px;
  
  .stats-cards {
    margin-bottom: 20px;
    
    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        
        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          
          .el-icon {
            font-size: 24px;
            color: white;
          }
          
          &.total-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }
          
          &.success-icon {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }
          
          &.rate-icon {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }
          
          &.avg-icon {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }
        }
        
        .stat-info {
          .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
            line-height: 1;
          }
          
          .stat-label {
            font-size: 14px;
            color: #909399;
            margin-top: 4px;
          }
        }
      }
    }
  }
  
  .charts-section {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>